<template>
    <div class="voucher-list">
        <Card class="clearfix" style="padding-bottom: 16px">
            <p slot="title">
                付款凭证
            </p>
            <!--新增-->
            <Form label-position="left" :label-width="72">
                <Row :gutter="15">
                    <i-col span="2">
                        <Button  @click="addData"  icon="ios-checkmark" style="width:80px;" type="primary">新增</Button>
                    </i-col>
                </Row>
            </Form>
            <br>
            <!-- 引入列表组件-->
            <div>
                <list-table refs="table1" v-model="tableData"  :table-data="tableData"></list-table>
                <!--<Button @click="back" class="back_btn">返回</Button>-->
                <Button  @click="saveData" class="back_btn" type="primary">保存数据</Button>
            </div>
            <!--新增弹窗-->
            <modal ref="createApp" v-model="dialogAdd"  title="新增付款凭证">
                <Form ref="addApply" :model="addApply" :rules="ruleValidate" style="max-height:300px;overflow: auto">
                    <FormItem label="文档名称：" prop="documentName">
                        <Input type="text" placeholder="请输入文档名称" v-model="addApply.documentName" style="width:220px"></Input>
                    </FormItem>
                    <FormItem  prop="uploadFiles">
                        <span style="color:red">* </span><span>上传图片：</span>
                        <Upload
                            style="display: inline-block;margin-left: 12px"
                            :show-upload-list="false"
                            :before-upload="handleUpload"
                            action="">
                            <Button type="ghost" icon="ios-cloud-upload-outline">上传</Button>
                        </Upload>
                    </FormItem>
                    <FormItem  prop="uploadUrl" label-position="left">
                        <img v-if="addApply.uploadUrl !== ''" :src="addApply.uploadUrl" height="200" width="200">
                    </FormItem>
                </Form>
                <div slot="footer">
                  <Button type="ghost" size="large" @click="cancleSubmit('addApply')">取消</Button>
                  <Button type="primary"  size="large" @click="createSubmit('addApply')">确认</Button>
                </div>
            </modal>
        </Card>
    </div>
</template>

<script>
    import listTable from './components/listTable.vue'
    import ImageEditor from "../../my-components/image-editor/image-editor";
    import ajax from '../../../libs/axios.js'
    export default {
        name: 'voucher',
        components: {
            ImageEditor,
            listTable
        },
        data () {
            return {
                tableData:[],           // 表格数据集合
                itemTotal: 1,           // 条数
                dialogAdd:false,        // 弹窗开关
                addApply:{
                    documentName:"",    // 文档名称
                    uploadUrl:""        // 上传图片路径
                },
                // 弹窗表单验证
                ruleValidate:{
                    documentName:[
                        { required: true, message: '文档名称不能为空', trigger: 'blur' }
                    ],
                    uploadUrl:[
                        { required: true, message: '上传图片不能为空', trigger: 'change' }
                    ]
                },
            }
        },
        methods: {

            init () {
                this.$store.commit('setActiveName', 'orderv2index')
                this.getList()
            },
            // 车辆信息新增按钮
            addData () {
                this.dialogAdd=true;   // 显示新增弹窗
                this.addApply.documentName="";
                this.addApply.uploadUrl="";
            },
            // 新增弹窗取消触发按钮
            cancleSubmit(name){
                this.dialogAdd=false;  // 取消关闭弹窗
                this.$refs[name].resetFields();
            },
            // 新增弹窗确认按钮
            createSubmit(name){
                debugger
                this.$refs[name].validate((valid) => {
                    if (valid){
                           let url = 'adminlogin/v2/carorder/uploadPayVoucher.html';
                           let userId = localStorage.getItem("userId");
                           let orderId = this.$route.params.id;
                           let data = {
                               description:this.addApply.documentName,
                               picUrl:this.addApply.uploadUrl,
                               createUser:userId,
                               orderId:orderId
                           }
                           console.log(data);
                        ajax.formRes(url, data).then((res)=>{
                            if (res.code == 200) {
                                let _this=this;
                                console.log(res);
                                setTimeout(() => {
                                    _this.$Message.success('添加成功');
                                }, 500);
                                this.dialogAdd=false;
                                this.init();
                            }
                        }).catch((err)=>{
                            console.log(err);
                        })
                       }
                });
            },
            // 初始化列表
            getList () {
                let url = 'adminlogin/v2/carorder/payVoucherList.html';

                let orderId = this.$route.params.id;
                let data={
                    orderId:orderId
                }
                ajax.formRes(url, data).then(res => {
                    if(res.code == 200){
                        this.tableData=res.data;
                    }else{
                        this.$Message.success('数据原因，请联系管理员。')
                    }

                }).catch(err => {
                    console.log(err)
                })
            },

            // 上传文件
            handleUpload (file) {
                this.file = file
                this.upload();
                return false;
            },
            // 上传图片
            upload (type) {
                let _this = this
                let fileName = _this.file.name
                //FormData 对象
                let formData = new FormData()
                // 文件对象
                formData.append("img", _this.file)
                formData.append("type", "partyInfo")
                ajax.upload('adminlogin/file/uploadOssImage',formData).then(function (res) {
                        setTimeout(() => {
                            _this.addApply.uploadUrl = res.url;
                            _this.file = '';
                            _this.$Message.success('上传成功');
                        }, 500);
                }, function (err) {
                    console.log(err)
                }).catch(function (error) {
                    console.log(error)
                })
            },
            // 存储支付尾款记录
            saveData(){
                let url = 'adminlogin/v2/carorder/tailMoneyRecord.html';
                let orderId = this.$route.params.id;
                let data={
                    orderId:orderId
                }
                ajax.formRes(url, data).then(res => {
                    if (res.code == 200) {
                        console.log("res-------")
                        console.log(res)
                        this.$router.push({
                            name: 'orderv2index'
                        })
                    }
                }).catch(err => {
                    console.log(err);
                    this.$Message.error("返回失败,请重试");
                })
            }
        },
        mounted () {
            this.init()
        },
        activated() {
            this.init()
        }
    }
</script>


<style lang="less">
    @import "../../../styles/common.less";
    @import "../../../styles/table.less";
</style>
<style>
    .voucher-list .back_btn{
        width:100px;
        float: right;
        margin: 20px 20px 0 0;
    }
</style>
